<template>
  <div class="game">
    <my-header></my-header>
    <div class="top-header">
      <div class="top-header-item">
        <h1>欢迎来到游戏专区</h1>
        <el-tag type="warning" effect="dark">提醒：本网站所提供的游戏仅供休闲放松，切勿沉迷其中</el-tag>
      </div>
    </div>
    <!-- 板块轮播 -->
      <el-carousel
        slot="item-plate"
        indicator-position="none"
        :loop="false"
        :autoplay="false"
        class="game-contain">
        <el-carousel-item
          class="carousel-plate"
          v-for="item in games"
          :key="item.pageId">
          <el-card
            class="plates"
            v-for="index in item.page"
            :key="index.palteId"
            :body-style="{ padding: '0px' }"
            shadow="hover"
            @click.native="toGame(index.url)">
            <img :src="index.img" alt="">
            <div>{{index.title}}</div>
          </el-card>
        </el-carousel-item>
      </el-carousel>
  </div>
</template>

<script>
import MyHeader from '@/components/MyHeader.vue'
export default {
  data () {
    return {
      games: [
        {
          pageId: 1,
          page: [
            {
              palteId: 1,
              img: require('@/assets/images/game/diyu.png'),
              title: '地狱闯关',
              url: 'http://43.138.211.99:8098/'
            },
            {
              palteId: 2,
              img: require('@/assets/images/game/maoxiandalu.png'),
              title: '冒险大陆',
              url: 'http://43.138.211.99:8099/'
            },
            {
              palteId: 3,
              img: require('@/assets/images/game/maoxiandao.png'),
              title: '冒险岛',
              url: 'http://43.138.211.99:8098/'
            }
          ]
        },
        {
          pageId: 2,
          page: [
            {
              palteId: 1,
              img: require('@/assets/images/game/rexuegedou.png'),
              title: '热血格斗',
              url: 'http://43.138.211.99:8099/'
            },
            {
              palteId: 2,
              img: require('@/assets/images/game/maoxiandalu.png'),
              title: '冒险大陆',
              url: 'http://43.138.211.99:8099/'
            },
            {
              palteId: 3,
              img: require('@/assets/images/game/hundouluo.png'),
              title: '魂斗罗',
              url: 'http://43.138.211.99:8099/'
            }
          ]
        }
      ]
    }
  },
  components: {
    MyHeader
  },
  methods: {
    toGame (url) {
      this.$store.commit('updateUrl', url)
      this.$router.push('/others')
    }
  }
}
</script>

<style lang="less" scoped>
  .top-header {
    height: 250px;
    background-image: url('@/assets/images/game/indexbg.jpg');
    .top-header-item {
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: center;
      height: 100%;
      color: #fff;
      background-color: rgba(51,51,51,0.9);
    }
    .el-tag {
      font-size: 18px;
    }
  }
  .game-contain {
    margin: 50px 0 0;
    text-align: center;
    .carousel-plate {
      display: flex;
      justify-content: space-around;
    }
    .plates {
      width: 256px;
      img {
        width: 256px;
        height: 256px;
      }
      &:hover{
        cursor: pointer;
        color: skyblue;
      }
    }
  }
</style>
